<template>
  <demo-content :title="title">
    <p>
      在进行绘图操作时，需要频繁修改 Canvas
      绘图环境的所有属性。很多时候我们只想临时性地改变这些属性，这时可以使用
      save / restore 方法，用于保存及恢复 canvas 绘图环境的所有属性。
    </p>
    <p>
      绘图环境中的 save 与 store 方法可以嵌套调用，对应的 restore
      方法会从堆栈顶部弹出一组状态信息，并据此恢复当前绘图环境的各个状态。
    </p>
    <canvas ref="canvasRef"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const title = "Save/Restore";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const context = canvas.getContext("2d")!;
  context.save();
  context.font = "38pt Arial";
  context.save();
  context.fillStyle = "cornflowerblue";
  context.fillText(
    "Hello Canvas", // 要绘制的文本内容
    canvas.width / 2 - 150,
    canvas.height / 2 + 15
  );
  context.restore();
  context.fillText("T1", 0, 40);
  context.restore();
  context.fillText("T2", 60, 40);
});
</script>

<style src="./default.css" scoped></style>
